<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>



<body>

    <div id="hello9">
        <lmq>
            <lmq-title slot="lmq-title" :title="title">

            </lmq-title>
            <lmq-items slot="lmq-items" v-for="item in items" :item="item">

            </lmq-items>
        </lmq>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        Vue.component("lmq", {
            template: '<div>' +
                '<slot name="lmq-title"></slot>' +
                '<ul>' +
                '<slot name="lmq-items"></slot>' +
                '</ul>' +
                '</div>'
        });

        Vue.component('lmq-title', {
            props: ['title'],
            template: "<p>{{title}}</P>"
        });
        Vue.component('lmq-items', {
            props: ['item'],
            template: "<li>{{item}}</li>"
        })
        var vm = new Vue({
            el: "#hello9",
            data: {
                message: "hello",
                title: "介绍",
                items: ["hello", 'yes', 213]
            }
        })
    </script>
</body>

</html>